<template>
  <div class="check-item" :class="{'active':isActive}">
    <slot />
    <div class="selected-icon-warp">
      <Icon type="ios-checkmark" class="selected-icon" />
    </div>
  </div>
</template>

<script>
export default {
  name: '',

  components: {},

  mixins: [],

  props: {
    isActive: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {}
  },

  computed: {},

  watch: {},

  created() {},

  mounted() {},

  destroyed() {},

  methods: {}
}
</script>

<style scoped lang="scss">
.check-item {
  min-width: 173px;
  position: relative;
  color: #04cb94;
  border-color: #04cb94;
  background-color: #fff;
  margin-right: 20px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  font-size: 14px;
  color: #8492a6;
  border: 1px solid #d3dce6;
  border-radius: 3px;
  cursor: pointer;
  &:hover {
    color: #1a90ff;
    border-color: #1a90ff;
  }

  &.active {
    color: #1a90ff;
    border-color: #1a90ff;

    .selected-icon-warp {
      position: absolute;
      display: block;
      top: -1px;
      right: 0;
      width: 0;
      height: 0;
      border-top: 20px solid #1a90ff;
      border-left: 23px solid transparent;
      .selected-icon{
        position: absolute;
        color: #fff;
        right: -7px;
        top: -25px;
        font-size: 25px;
      }
    }
  }
  .selected-icon-warp {
    display: none;
  }
}
</style>
